<template>
    <div class="echarts-box">
        <div :id="this.id" :style="{ width: this.width, height: this.height }"></div>
    </div>
</template>

<script>
import * as echarts from "echarts"
import { onMounted, onUnmounted, watch } from "vue"

export default {
    name: 'ColumnChart',
    props: ["width", "height", "id", "data", "color", "rgba", "offset", "seriesName"],
    setup(props) {
        let myEcharts = echarts
        var id = ref(props)._rawValue.id
        var color = ref(props)._rawValue.color
        var rgba = ref(props)._rawValue.rgba
        var offset = ref(props)._rawValue.offset
        var seriesName = ref(props)._rawValue.seriesName

        watch(() => props.data, newVal => {
            const data = JSON.parse(JSON.stringify(newVal))
            if (newVal) {
                initChart(data)
            } else {
                onMounted(() => {
                    initChart()
                })
            }
        })

        onUnmounted(() => {
            myEcharts.dispose
        })

        function initChart(data) {
            let chart = myEcharts.init(document.getElementById(id), "purple-passion");
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#dddc6b'
                        }
                    }
                },
                legend: {
                    top: '0%',
                    left: '5%',
                    textStyle: {
                        color: '#000',
                        fontSize: '12',
                    },
                },
                grid: {
                    left: '10',
                    top: '30',
                    right: '15',
                    bottom: '10',
                    containLabel: true
                },

                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        color: "rgba(0, 0, 0,.6)",
                        fontSize: 12,
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0,.2)'
                        }

                    },
					axisLabel: {
					    color: "rgba(0, 0, 0,.6)",
					    fontSize: 12,
						 interval: 0
					},
                    data: data.yearData

                }, {

                    axisPointer: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    position: 'bottom',
                    offset: 20,
                }],

                yAxis: [{
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0,.1)'
                        }
                    },
                    axisLabel: {
                        color: "rgba(0, 0, 0,.6)",
                        fontSize: 12
                    },

                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    }
                }],
                series: [{
                    name: seriesName,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    lineStyle: {
                        color: color,
                        width: 2
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: rgba
                        }, {
                            offset: 0.8,
                            color: offset
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                    },
                    itemStyle: {
                        color: color,
                        borderColor: 'rgba(221, 220, 107, .1)',
                        borderWidth: 12
                    },
                    data: data.yearDataNumAdd
                },

                ]
            });
            window.onresize = function () {
                chart.resize();
            };
        }
        return {
            initChart
        };
    }
};
</script>